<!DOCTYPE html>
<html>
<head>
    <title>AI Chat</title>
    <style>
        #chat-container {
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #chat-log {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
        }
        #message-input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="chat-log"></div>
        <input type="text" id="message-input" placeholder="Type your message...">
    </div>

    <script>
        let conversationId = '';

        async function sendMessage() {
            const message = document.getElementById('message-input').value;
            if (!message) return;

            const chatLog = document.getElementById('chat-log');
            chatLog.innerHTML += `<div><strong>You:</strong> ${message}</div>`;

            const eventSource = new EventSource(`http://localhost:8080/dqAi/api/chatMessagesStreaming?query=${encodeURIComponent(message)}&response_mode=streaming&conversation_id=${conversationId}&userName=wangkeng`);
            eventSource.onmessage = function(event) {
                const data = JSON.parse(event.data);
                if (data.conversation_id) {
                    conversationId = data.conversation_id;
                }
                if (data.answer) {
                    chatLog.innerHTML += `${data.answer}`;
                }
            };
            chatLog.scrollTop = chatLog.scrollHeight;
            document.getElementById('message-input').value = '';
        }

        document.getElementById('message-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>